<template>
  <div class="trend">
    <div class="text" :style="{color: textColor, fontSize: fontSize + 'px'}">
      <slot v-if="slots.default"></slot>
      <div v-else>{{ text }}</div>
    </div>
    <div class="icon">
      <component :is="`el-icon-${toLine(upIcon)}`" v-if="type === 'up'" :style="{ color: !reverseColor ?  upIconColor : '#52c41a' }"></component>
      <component :is="`el-icon-${toLine(downIcon)}`" v-else :style="{ color:!reverseColor ? downIconColor : '#f5222b' }"></component>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useSlots, computed } from 'vue'
import { toLine } from '../../../utils';
let props = defineProps({
  //标记当前趋势是上升up还是下降down
  type: {
    type: String,
    default: 'up'
  },
  //趋势显示的文字
  text: {
    type: String,
    default: '文字'
  },
  upIconColor: {
    type: String,
    default: '#f5222b'
  },
  upIcon: {
    type: String,
    default: 'ArrowUp'
  },
  downIcon: {
    type: String,
    default: 'ArrowDown'
  },
  downIconColor: {
    type: String,
    default: '#52c41a'
  },
  //颜色翻转，只在默认的颜色下生效
  reverseColor: {
    type: Boolean,
    default: false
  },
  upTextIconColor: {
    type: String,
    default: 'rgb(0,0,0)'
  },
  downTextIconColor: {
    type: String,
    default: 'rgb(0,0,0)'
  },
  fontSize: {
    type: Number,
    default: 16
  }
})

let slots = useSlots()

let textColor = computed(() => {
  return props.type === 'up' ? props.upTextIconColor : props.downTextIconColor
})
</script>

<style scoped lang="scss">
.trend {
  display: flex;
  align-items: center;

  .text {
    font-size: 16px;
    margin-right: 8px;
  }

  .icon {
    svg {
      width: 1em;
      height: 1em;
    }
  }
}</style>